<style scoped>
.el-row {
  display: flex;
  flex-wrap: wrap;
}

.gray-scale {
  filter: grayscale(75%) brightness(25%);
}
</style>
<template>
  <div>
    <div v-for="category in categoryList">
      <p style="font-weight: bold;font-size: 30px;margin-bottom: 20px">{{ category.name }}</p>
      <el-row :gutter="50">
        <el-col :span="6" v-for="court in category.courtList">
          <div style="background-color: #8c939d;width: 250px;position: relative;border-radius: 10px;overflow: hidden;
padding-bottom: 10px">
            <el-tooltip placement="top" :disabled="court.description===null">
              <div slot="content" style="text-align: center;font-size: 18px">
                {{ court.description }}
              </div>
              <el-image :class="court.isEnable?'':'gray-scale'" style="text-align: center;;width: 250px; height: 250px;"
                        :src="court.url" fit="fill"/>
            </el-tooltip>
            <p style="font-size: 25px;font-weight: bold;text-align: center">{{ court.name }}</p>
            <p style="font-size: 20px;text-align: center">{{ court.price }}元/2小时</p>
            <div style="font-size: 25px;position: absolute;top: 10px;right: 10px;z-index: 10">
              <div v-if="court.isEnable===1" style="color: forestgreen;">
                <span style="margin-right: 5px">正在开放</span>
                <i class="el-icon-success"/>
              </div>
              <div v-else style="color: red;">
                <div>
                  <span style="margin-right: 5px">已关闭</span>
                  <i class="el-icon-error"/>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-divider/>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "courtList",
  data() {
    return {
      categoryList: []
    }
  },
  methods: {
    loadCourt() {
      let url = "http://localhost:9999/zx-court/court/UserWatchList"
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state === 200) {
          jsonResult = jsonResult.data;
          this.loadCategory(jsonResult);
        } else {
          this.$message({message: "获取场地数据失败", type: "error"})
        }
      })
    },
    loadCategory(data) {
      let url = "http://localhost:9999/zx-court/category/getFrontIdAndName"
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state === 200) {
          jsonResult = jsonResult.data;
          this.categoryList = jsonResult
          for (let i = 0; i < this.categoryList.length; i++) {
            this.categoryList[i].courtList = data.filter(item => item.categoryId === this.categoryList[i].id)
          }
        }
      })
    }

  },
  mounted() {
    this.loadCourt()
  }
}
</script>